// import { Component, Input, Output, EventEmitter } from '@angular/core';
// import { CommonModule } from '@angular/common';
// import { LayoutContainer } from '../../models/layout.models';
//
// @Component({
//   selector: 'app-three-columns-container',
//   standalone: true,
//   imports: [CommonModule],
//   template: `
//     <div class="layout-container three-columns">
//       <div class="layout-header">
//         <div class="layout-title">
//           <i class="material-icons">view_week</i>
//           {{containerData?.title || '三列布局'}}
//         </div>
//         <div class="layout-actions">
//           <button (click)="onSettings()"><i class="material-icons">settings</i></button>
//           <button (click)="onDelete()"><i class="material-icons">delete</i></button>
//         </div>
//       </div>
//       <div class="layout-content">
//         <p>三列布局容器 - 开发中</p>
//       </div>
//     </div>
//   `,
//   styleUrls: ['./single-column.component.scss']
// })
// export class ThreeColumnsContainerComponent {
//   @Input() id!: string;
//   @Input() containerData?: LayoutContainer; // 添加 containerData 输入属性
//   @Output() delete = new EventEmitter<string>();
//
//   onSettings() {
//     console.log('Settings clicked for container:', this.id);
//   }
//
//   onDelete() {
//     this.delete.emit(this.id);
//   }
// }
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutContainer } from '../../models/layout.models';

@Component({
  selector: 'app-three-columns-container',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="layout-container three-columns">
      <div class="layout-header">
        <div class="layout-title">
          <i class="material-icons">view_week</i>
          {{containerData?.title || '三列布局'}}
        </div>
        <div class="layout-actions">
          <button (click)="onSettings()"><i class="material-icons">settings</i></button>
          <button (click)="onDelete()"><i class="material-icons">delete</i></button>
        </div>
      </div>
      <div class="layout-content">
        <div class="three-columns-content">
          <div class="column">
            <div class="empty-column">
              <i class="material-icons">add_circle_outline</i>
              <span>第一列</span>
            </div>
          </div>
          <div class="column">
            <div class="empty-column">
              <i class="material-icons">add_circle_outline</i>
              <span>第二列</span>
            </div>
          </div>
          <div class="column">
            <div class="empty-column">
              <i class="material-icons">add_circle_outline</i>
              <span>第三列</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./single-column.component.scss']
})
export class ThreeColumnsContainerComponent {
  @Input() id!: string;
  @Input() containerData?: LayoutContainer;
  @Output() delete = new EventEmitter<string>();

  onSettings() {
    console.log('Settings clicked for container:', this.id);
  }

  onDelete() {
    this.delete.emit(this.id);
  }
}
